<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vertical-align属性说明</title>
    <style>

        .main {
            height: 300px;
            width: 300px;
            display: inline-table;
        }

        div {
            border: 1px solid black;
        }

        .top {
            /*
            说明:
                1. 该属性是用来设置元素垂直对齐的.
            注意:
                1. 该属性好像只能应用于表格中, 用在div上需要一些额外的属性进行配合.
                    - 在外层div中设置属性display: inline-table;
                    - 在内层div中设置属性display: table-cell;
                    - 然后就可以使vertical-align属性生效.
            */
            vertical-align: top;
        }

        .middle {
            vertical-align: middle;
            text-align: center;
        }

        .bottom {
            vertical-align: bottom;
        }

        .top-div {
            vertical-align: top;
            display: table-cell;
        }

        .middle-div {
            vertical-align: middle;
            text-align: center;
            display: table-cell;
        }

        .bottom-div {
            vertical-align: bottom;
            display: table-cell;
        }

    </style>
</head>
<body>
<div class="main">
    <div class="top-div">w3cschool</div>
    <div class="middle-div">w3cschool</div>
    <div class="bottom-div">w3cschool</div>
</div>
<table border="1" cellpadding="2" cellspacing="0" style="height: 150px; width: 500px;">
    <tr>
        <td class="top">Top</td>
        <td class="middle">Middle</td>
        <td class="bottom">Bottom</td>
    </tr>
</table>
</body>
</html>